<template>
	<view v-if="isshow">
		<view class="view-main" style="display: flex;">
			<view class="main-first">
				<text class="text_use0" v-if="city.index == 1">{{city.name}}货源</text>
				<text class="text_use0" v-else>{{city.name}}船源</text>
			</view>
			<view class="main-second">
				<image  class="view-image" src="@/static/img/down.jpg" @click="_close" ></image>
			</view>	
		</view>
		<view class="view-content">
			<text class="text_use1 width1">名称</text>
			<text class="text_use1 width2">所在港</text>
			<text class="text_use1 width3">到达港</text>
			<text class="text_use1 width4">吨位</text>
			<text class="text_use1 width5">装运期限</text>
		</view>
		  <scroll-view scroll-y="true"  class="scroll-Y">        
			<view  v-for="(tem,index) in dataList" :key="index">
			<view class="scrollMain" :class="{'scrollMain2' : index %2 == 1}" @click="returnid(index)">	<text class="text_use width1">{{tem.hwmc}}</text>
				<text class="text_use width2">{{tem.qd}}</text>
				<text class="text_use width3">{{tem.zd}}</text>
				<text class="text_use width4">{{tem.dw}}</text>
				<text class="text_use width5">{{tem.addtime}}</text></view>
			</view>
  
		</scroll-view>
	</view>
</template>
<script>
	export default{
		props:{
			isshow:Boolean,
			dataList: {
			    type: Object
			},
			city: {
				type: Object
			}
		},
		methods:{
			_close:function(e){
				this.isshow=false;
				this.$emit("greet",this.isshow);
				console.log(this.isshow);
			},
			returnid(e){
				console.log(e);
				console.log(this.dataList[e].id);
				this.$emit("greeta",this.dataList[e].id);
			}
		}
	}
</script>

<style>
	.scroll-Y{
		max-height: 630upx;
	}
	.text_use0{
			position: relative;
		/* 	flex-direction: column; */
		    text-align:left;
			font-size: 35
			padding: 25rpx 20upx 2rpx 55upx;
			border: 1upx solid #dedede;
	}
	.text_use1{
			position: relative;
		/* 	flex-direction: column; */
		    text-align:center;
			font-size: 30upx;
			padding: 20upx 0;
			border: 1upx solid #000000;
	}
	.text_use{
			position: relative;
		    text-align:center;
		    padding: 20upx 0;
			font-size: 26upx;
			border: 1upx solid #000000;
	}
	.width1{
		width: 170upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.width2{
		width: 140upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.width3{
		width: 140upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.width4{
		width: 130upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.width5{
		width: 170upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.view-main
		flex-direction: row;
		background-color: #ffffff;
	}
	.main-first{
		font-size: 100upx;
		padding-bottom: 15upx;
	}
	.main-second{
		font-size: 40upx; 
		position: absolute;
		right:30upx;
		top: 5upx;
		/* width: 200uxp;
		height: 200upx; */
	}
	.view-image{
		width: 60upx;
		height: 60upx;
	}
	.view-content{
		flex-direction: row;
		background-color: #e7e7e7;
	}
	.scrollMain{
		flex-direction: row; 
		background-color: #ffffff;
		border: 10upx solid #000000;
	}
	.scrollMain2{
		background-color: #e7e7e7;
	}
</style>